<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/zepto.min.js"></script>
    <script src="./js/touch.js"></script>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    .header-top{background-image: url('./image/u72.png');background-repeat: no-repeat;background-size: contain;width: 100%;height: 20px;background-color: white;}
    .banner{border-bottom: 1px gray solid;}
    li{list-style-type: none;}
    a{text-decoration-line: none;}
    .head{position: fixed;top: 0;width: 100%;z-index: 1000;}
    .sec{
        width: 100%;
        height: 672px;
        position: relative;
        overflow: hidden;
       top: 71px;
    }
    .sec-one{
        width: 100%;
        height: 112px;
        background-color: white;
    }
    .sec-one-left{
        width: 43px;
        height: 112px;
        background-color: #fff;
        position: relative;
        float: left;
        
    }
    .sec-one-left-mid{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
       border:1px gray solid;
    }
    .pic{
        width: 82px;
        height: 82px;
        background-color: #d6d6d6;
        float: left;
        margin-top: 15px;
    }
    .backimg{
        background-image: url('./image/xuanze2.png');
        background-repeat: no-repeat;
        background-size: contain;
    }
    .complete{display: none;}
    .speci{
        display: none;
    }
   .bottom-frame{
       width: 100%;
       height: 450px;
       position: absolute;
       background-color: white;
   } 
  .bot-pic{
    width: 88px;
    height: 88px;
    background-color: #d6d6d6;
    margin-left: 15px;
    margin-top: 15px;
    float: left;
}
.bot-bot{
    width: 100%;
    height: 280px;
    float: left;
   
}
.bot-bot div{
    width: 88px;
    height: 36px;
    background-color: gray;
    float: left;
    margin-left: 20px;
    border-radius: 10%;
    margin-top: 20px;
}
.bot-bot div h4{
    text-align: center;
    line-height: 36px;
}
.bot-confirm{
    width: 100%;
    height: 50px;
    background-color: red;
    position: absolute;
    bottom: 0;
}
.collect{
    width: 75px;
    height: 112px;
    background-color: gray;
    float: right;
    display: none;
}
.collect h4{
    text-align: center;
    margin-top: 30px;
    font-weight: 400;
}
.del{
    width: 75px;
    height: 112px;
    background-color: gray;
    background-color: red;
    float: right;
    display: none;
}
.del h4{
    text-align: center;
    margin-top: 30px;
    font-weight: 400;
}
.foot-bot{
    width: 100%;
    height: 50px;
    background-color: #fff;
    position: fixed;
    bottom: 0;

}
.checkAll{
    width: 18px;
    height: 18px;
    border:1px gray solid;
    float: left;
    border-radius: 50%;
    margin-left: 10%;
    margin-top: 5%;

}
</style>
<body>
    <div class="container">
<div class="head">
        <div class="header-top">
        </div>
        <div class="banner" style="width: 100%;height: 50px;background-color: white;position: relative;">
           <h3 style="padding-top: 15px;margin: 0;float: left;color: #6a5a5a;position: absolute;left:40%;">购物车</h3>
         <li style="position: absolute;bottom: 10px;right: 10px;"><a href="#" style="color: #4d4545;" class="edit">编辑</a></li>
         <li style="position: absolute;bottom: 10px;right: 10px;"><a href="#" style="color: #4d4545;" class="complete">完成</a></li>
        </div>
    </div>
        <section>
            <div class="sec">
            <div class="sec-one">
                <div class="del">
                    <h4>删除</h4>
                </div>
                <div class="collect">
                    <h4>移入收藏夹</h4>
                </div>
               
                <div class="sec-one-left">
                    <div class="sec-one-left-mid selects" checked="checked">
                    </div>
                </div>
                <div class="pic">
     
                </div>
                <span style="float: left;margin-left: 12px;margin-top: 15px;">商品名称</span></br>
                <span style="float: left;margin-top: 20px;margin-left: -64px;" class="specone">商品属性规则</span>
                <span style="float: left;margin-top: 23px;margin-left: -64px;padding: 1px 1px;background-color: #d6d6d6;" class="speci">商品属性规则﹀</span>
                <span style="color: red;margin-top: 50px;float: left;margin-left: -96px;">￥</span>
                <span style="float: left;color: red;margin-top: 45px;margin-left: -80px;font-size: 20px;">39</span>
                 </div>   
                 <div class="sec-one-dec">
                     <img src="./image/购物车下划线.png" alt="" style="float: right;">
                 </div>

            <div class="sec-one">
                <div class="sec-one-left">
                    <div class="sec-one-left-mid selects" checked="checked">
                    </div>
                </div>
                <div class="pic">
     
                </div>
                <span style="float: left;margin-left: 12px;margin-top: 15px;">商品名称</span></br>
                <span style="float: left;margin-top: 20px;margin-left: -64px;"  class="specone">商品属性规则</span>
                <span style="float: left;margin-top: 23px;margin-left: -64px;padding: 1px 1px;background-color: #d6d6d6;" class="speci">商品属性规则﹀</span>
                <span style="color: red;margin-top: 50px;float: left;margin-left: -96px;">￥</span>
                <span style="float: left;color: red;margin-top: 45px;margin-left: -80px;font-size: 20px;">39</span>
                 </div>   
                 <div class="sec-one-dec">
                     <img src="./image/购物车下划线.png" alt="" style="float: right;">
                 </div>
                 
                 <div class="sec-one">
                    <div class="sec-one-left">
                        <div class="sec-one-left-mid selects" checked="checked">
                        </div>
                    </div>
                    <div class="pic">
         
                    </div>
                    <span style="float: left;margin-left: 12px;margin-top: 15px;">商品名称</span></br>
                    <span style="float: left;margin-top: 20px;margin-left: -64px;"  class="specone">商品属性规则</span>
                    <span style="float: left;margin-top: 23px;margin-left: -64px;padding: 1px 1px;background-color: #d6d6d6;" class="speci">商品属性规则﹀</span>
                    <span style="color: red;margin-top: 50px;float: left;margin-left: -96px;">￥</span>
                    <span style="float: left;color: red;margin-top: 45px;margin-left: -80px;font-size: 20px;">39</span>
                     </div>   
                     <div class="sec-one-dec">
                         <img src="./image/购物车下划线.png" alt="" style="float: right;">
                     </div>
                           
                     <div class="sec-one">
                        <div class="sec-one-left">
                            <div class="sec-one-left-mid selects" checked="checked">
                            </div>
                        </div>
                        <div class="pic">
             
                        </div>
                        <span style="float: left;margin-left: 12px;margin-top: 15px;">商品名称</span></br>
                        <span style="float: left;margin-top: 20px;margin-left: -64px;"  class="specone">商品属性规则</span>
                        <span style="float: left;margin-top: 23px;margin-left: -64px;padding: 1px 1px;background-color: #d6d6d6;" class="speci">商品属性规则﹀</span>
                        <span style="color: red;margin-top: 50px;float: left;margin-left: -96px;">￥</span>
                        <span style="float: left;color: red;margin-top: 45px;margin-left: -80px;font-size: 20px;">39</span>
                         </div>   
                         <div class="sec-one-dec">
                             <img src="./image/购物车下划线.png" alt="" style="float: right;">
                         </div>

                         <div class="sec-one">
                            <div class="sec-one-left">
                                <div class="sec-one-left-mid selects" checked="checked">
                                </div>
                            </div>
                            <div class="pic">
                 
                            </div>
                            <span style="float: left;margin-left: 12px;margin-top: 15px;">商品名称</span></br>
                            <span style="float: left;margin-top: 20px;margin-left: -64px;"  class="specone">商品属性规则</span>
                            <span style="float: left;margin-top: 23px;margin-left: -64px;padding: 1px 1px;background-color: #d6d6d6;" class="speci">商品属性规则﹀</span>
                            <span style="color: red;margin-top: 50px;float: left;margin-left: -96px;">￥</span>
                            <span style="float: left;color: red;margin-top: 45px;margin-left: -80px;font-size: 20px;">39</span>
                             </div>   
                             <div class="sec-one-dec">
                                 <img src="./image/购物车下划线.png" alt="" style="float: right;">
                             </div>

                             <div class="sec-one">
                                <div class="sec-one-left">
                                    <div class="sec-one-left-mid selects" checked="checked">
                                    </div>
                                </div>
                                <div class="pic">
                     
                                </div>
                                <span style="float: left;margin-left: 12px;margin-top: 15px;">商品名称</span></br>
                                <span style="float: left;margin-top: 20px;margin-left: -64px;"  class="specone">商品属性规则</span>
                                <span style="float: left;margin-top: 23px;margin-left: -64px;padding: 1px 1px;background-color: #d6d6d6;" class="speci">商品属性规则﹀</span>
                                <span style="color: red;margin-top: 50px;float: left;margin-left: -96px;">￥</span>
                                <span style="float: left;color: red;margin-top: 45px;margin-left: -80px;font-size: 20px;">39</span>
                                 </div>   
                                 <div class="sec-one-dec">
                                     <img src="./image/购物车下划线.png" alt="" style="float: right;">
                                 </div>
                                <div class="foot-bot">
                                 <div class="checkAll">
                                 </div>
                                   <h3 style="margin-top: 4%;margin-left: 18%;font-weight: 400;" id="checked">全选</h3>
                                   <h5 style="float: left;margin-left: 50%;margin-top: -6%;font-weight: 400;">合计￥</h5>
                                   <h5 style="color: red;margin-left: 65%;margin-top: -6%;font-weight: 400;">168.00</h5>
                                 
                                  <span style="width: 60px;height: 50px;background-color:red;float: right;margin-top: -11%;"><a href="./second.html" style="color: black;"><h5 style="text-align: center;line-height: 50px;">去结算</h5></a></span>
                                </div>
                                 <div class="bottom-frame">
                                     <div class="bottom-frame-del">
                                         <img src="./image/quxiao (1).png" alt="" style="float: right;width: 18px;height: 18px;margin: 5px 5px;" class="cancel">
                                         <div class="bot-pic"> </div>
                                         </div>
                                         <span style="color: #5f5f5f;font-weight: 800;margin-left: 10px;margin-top: 50px;float: left;">价格：</span>
                                         <span style="color: red;font-weight: 400;margin-top: 50px;float: left;">￥11</span>
                                         <span style="color: #5f5f5f;font-weight: 400;margin-left: 10px;margin-top: 70px;float: left;margin-left: -82px;">库存：8813</span>
                                         <div class="bot-bot">
                                               <h4 style="margin-left:10px;margin-top:10px;">属性名称1</h4>
                                                <div><h4>属性值1</h4></div>
                                                <div><h4>属性值2</h4></div>
                                                <div><h4>属性值3</h4></div>
                                                <h4 style="margin-left:10px;margin-top:30px;float: left;margin-right: 200px;">属性名称2</h4>
                                                <div><h4>属性值1</h4></div>
                                                <div><h4>属性值2</h4></div>
                                                <div><h4>属性值3</h4></div>
                                         </div>
                                         <div class="bot-confirm">
                                         <li><a href="#"><h3 style="text-align: center;line-height:50px;color: white;">确定</h3></a></li>
                                         </div>
                                     </div>
                                 </div>
                                </div>
        </section>
    </div>
</body>
<script>
    $('.sec-one-left-mid').removeClass("backimg")
    $('.sec-one-left-mid').click(function(){
        $(this).toggleClass("backimg")
    })
    $('.edit').click(function(){
        $('.sec-one-left-mid').removeClass('backimg')
        $(this).hide();
        $('.complete').css('display','block')
        $('.specone').css('display','none');
        $('.speci').css('display','block')
    })
    $('.complete').click(function(){
        $('.edit').show();
        $(this).css('display','none')
        $('.specone').css('display','block');
        $('.speci').css('display','none')
    })
    $('.speci').click(function(){
       $('.bottom-frame').animate({
           bottom:'0px'
       },'slow') 
    })
    $('.cancel').click(function(){
        $('.bottom-frame').animate({
        bottom:'-450px'
        },'slow')
    })
//     $(".sec-one").swipeLeft(function () {
//     $('.del').hide()
//     $(this).eq(2).show();
//   })
    //   $('.sec-one').swipeLeft(function(){
    //      $(this).eq(0).show();
    //      $(this).eq(1).show();
    //   })
 $(".checkAll").click(function(){
     $(this).toggleClass("backimg")
 })
 
 window.onload=function(){
     var checkAll=document.getElementsByClassName('checkAll')
     var inputs=document.getElementsByClassName('selects');
     var checked = document.getElementById('checked');
     //w为全选添加事件
    //  console.log($('.checkAll').prop('backimg'))
     var btn = document.getElementsByClassName("checkAll")[0];
        btn.addEventListener('change',function(){
         for(var i=0;i<inputs.length;i++){
             if($(".checkAll").attr("backimg")){
                  inputs[i].attr('backimg')
             }
             else{
             inputs[i].checked=false;
            }
         }
         counts();
     })


     //单个选框添加事件
     for(var i=0;i<inputs.length;i++){
        inputs[i].addEventListener('change',function(){
            qxFn();
        })
     }
    var qxFn = function(){
        var count=0;//定义一个计数变量
        for (var j = 0; j < inputs.length; j++){
            if(inputs[j].checked){
                count++;
            }
            if(count==inputs.length){
                checkAll.checked=true;
            }
            else{
                checkAll.checked=false;
            }
        }
        counts();//重新计算选中个数
    } 







 }
    
</script>
</html>